import React, {
    Component
} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Dimensions,
    FlatList,
    TouchableOpacity,
    ImageBackground
} from 'react-native';
import Orientation from 'react-native-orientation';
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
export default class MyListItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            useranswerOption:""
        }
    }
    _renderAnswer = ({item}) =>{
        let info =""
        if(this.props.item.type=='填空题'){
            info=item.answerOption
        }else{
            info=item.answerOption +"、"+item.answerContent
        }
        return  (
                <View style={[styles.answeritem]}>
                    <Text style={[this.props.activeQuestIndex==this.props.item.id?styles.fontColor:styles.activefontColor]}>{info}</Text>
                </View>
        )
    };
    setFastList(item){
       // if(item.type==1){
            return (
                <FlatList
                        extraData={this.props.activeQuestIndex}
                        data={this.props.item.options}
                        renderItem={this._renderAnswer}
                        />
            )
       // }

    }
    componentDidMount(){
        let answerDesc=[]
        this.props.item.options.map((obj)=>{
            console.log(obj)
            if(obj.isRight=="1"){
                answerDesc.push(obj.answerOption)
            }
        })  
        this.setState({
            useranswerOption:answerDesc.join(";")
        })
    }
    render() {
        return ( 
            <TouchableOpacity onPress={this.props._onPressQuestItem}>
                <View style={[this.props.activeQuestIndex==this.props.item.id?styles.main2:styles.main]} >
                    <Text style={[this.props.activeQuestIndex==this.props.item.id?styles.fontColor:styles.activefontColor]}>
                    {this.props.item.stem}
                    </Text>
                    {this.setFastList(this.props.item)}
                    <Text style={[styles.answerDesc,this.props.activeQuestIndex==this.props.item.id?styles.fontColor:styles.activefontColor]}>答案:{this.state.useranswerOption}</Text>
                </View>
            </TouchableOpacity>

        )
    }
}
const styles = StyleSheet.create({
    main:{
        flex: 1,
        backgroundColor:'#dddddd',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        flexDirection: 'column',
        margin:5,
        minHeight:100,
        borderRadius: 5,
        textAlign:'center',
        padding:10,
        opacity:0.5,
    },
    main2:{
        flex: 1,
        backgroundColor:'#dddddd',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        flexDirection: 'column',
        margin:5,
        minHeight:100,
        // borderRadius: 5,
        textAlign:'center',
        padding:10,
        borderColor:'#198fff' ,
        borderWidth: 2,
    },
    fontColor:{
        color:'#000000',
        fontSize: 18,
    },
    activefontColor:{
        color:'#000000',
        fontSize: 18,
    },
    answeritem:{
        marginTop: 3,
        marginBottom: 3,
        width:300
    },
    answerDesc:{
        marginTop: 30,

    }
    
})